<template>  
  <view class="container">  
    <image class="logo" src="../../static/logo.png"></image>  
    <view class="form">  
      <input v-model="account" placeholder="账号" style="margin-top: 30px;"/>  
      <input v-model="password" type="password" placeholder="密码" style="margin-top: 15px;"/>  
      <input v-model="confirmPassword" type="password" placeholder="重复密码" style="margin-top: 15px;"/>  
      <input v-model="name" placeholder="姓名" style="margin-top: 15px;"/>  
      <button @click="register">注册</button>  
      <text @click="goToLogin" style="margin-top:15px;">已有账号？点击<text style="color: red;">登录</text></text>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      account: '',  
      password: '',  
      confirmPassword: '',  
      name: ''  
    };  
  },  
  methods: {  
    register() {  
      if (this.account === '' || this.password === '' || this.confirmPassword === '' || this.name === '') {  
        uni.showToast({  
          title: "请输入完整信息",  
          icon: "none"  
        });  
        return;  
      }  
      if (this.password !== this.confirmPassword) {  
        uni.showToast({  
          title: "两次密码输入不一致",  
          icon: "none"  
        });  
        return;  
      }  
  
      this.$axios("user/register",{
		  params:{
			  acc: this.account,
			  password: this.password,  
			  userName: this.name 
		  }
	  })
	  .then(Response=>{
		  if (Response.data.statusCode === 200) {
		    uni.showToast({  
		      title: "注册成功",  
		      icon: "success"  
		    });  
		    // 根据需要跳转页面，例如回到登录页面或首页  
		  			 this.account=""
		  			 this.password=""
		  			 this.name=""
		  			 this.confirmPassword=""
		    // uni.navigateTo({  
		    //   url: '/pages/index/login'  
		    // });  
		  } else {  
		    uni.showToast({  	
		      title: Response.data.errMsg,  
		      icon: "error"  
		    });  
		  }  
	  })
    },  
    goToLogin() {  
      uni.navigateTo({  
        url: '/pages/index/login'  
      });  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* 可以直接复制登录页面的样式，或者根据需要调整 */  
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 20px;  
  background-color: #f5f5f5;  
  height: 90vh;  
}  
  
.logo {  
  width: 120px;  
  height: 120px;  
  border-radius: 50%;  
  margin-top: 50px;  
  margin-bottom: 30px;  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
}  
  
.form {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  background: #ffffff;  
  border-radius: 10px;  
  padding: 20px;  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
  width: 300px;  
}  
  
input {  
  width: 100%;  
  height: 40px;  
  margin-bottom: 15px;  
  border: 1px solid #ddd;  
  border-radius: 8px;  
  padding: 0 10px;  
  }
  
  </style>  
